<script setup>
import { onMounted,ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';

const fileList = ref([]);
const imageUrl=ref('');
// 定义一个数据总条数
let total = ref(0);
//
const tableData = ref([])


// 修改或添加
const saveOrUpdateVisible = ref(false);
const article = ref({
  courseTypeId:0,
  courseTypeName:''
})
const saveOrUpdateTitle = ref('添加');
// 去修改的页面
const toEdit = row=>{
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  article.value = row;
}

// 去添加的页面
const toAdd = row=>{
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加';
  article.value = {
    courseTypeId:0,
    courseTypeName:''
  }
}

// 取消修改或保存
const close = ()=>{
  saveOrUpdateVisible.value = false;
  // 请求图片展示
  imageUrl.value = '';
  fileList.value = [];
  article.value = {
    courseTypeId:0,
    courseTypeName:'',
  }
}

// 保存或更新
const saveOrUpdate = ()=>{
  if(saveOrUpdateTitle.value == '添加'){
    // 调用后端接口添加
    axios.post('/coursetype/addCoursetype?coursetypename='+article.value.courseTypeName)
        .then(resp=>{
          // console.log(resp.data)
          let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if(result.code==1){
            // 重新获取列表
            getList();
          } else{
            console.log('添加文章失败')
          }
        })
  } else{
    // 调用后端接口修改
    axios.put('/coursetype/updateCoursetype',article.value)
        .then(resp=>{
          let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if(result.code==1){
            // 重新获取列表
            getList();
          } else{
            console.log('修改文章失败')
          }
        })
  }
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  // 请求图片展示
  article.value = {
    courseTypeId:0,
    courseTypeName:''
  }
}



// 定义一个方法当页面加载后立马执行的代码
onMounted(()=>{
  getList();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
  pageNum:1,
  pageSize:5
})

//定义一个方法，来动态的调用后端接口，获取文章列表
const getList = ()=>{
  // 使用axios调用后端接口获取数据
  axios.get('/coursetype/findAllCoursetypePage',{
    params: queryInfo.value
  })
      .then(resp=>{
        console.log(resp)
        let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
        if(result.code==1){
          // 更新总条数
          total.value=result.data.total;
          tableData.value=result.data.list;
        }else{
          console.log('获取分类列表失败')
        }
      })

}


// 删除
const onDel = id=>{
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 调用后端接口删除
        axios.delete('/coursetype/deleteCoursetype?coursetypeid='+id)
            .then(resp=>{
              let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
              if(result.code==1){
                // 重新获取列表
                getList();
                ElMessage({
                  message: '删除成功！',
                  type: 'success',
                })
              }else{
                ElMessage({
                  message: '删除失败！',
                  type: 'warning',
                })
              }
            })
      })
      .catch(() => {})
}



// 分页
const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getList();
}

</script>


<template>
  <div class="about">
    <div class="mb20">
      <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="courseTypeId" label="编号" width="80" />
      <el-table-column prop="courseTypeName" label="课程分类" width="120" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改</el-button>
          <el-button link type="primary" @click="onDel(scope.row.courseTypeId)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-pagination style="margin-top: 10px;"
                 v-model:current-page="queryInfo.pageNum"
                 v-model:page-size="queryInfo.pageSize"
                 :page-sizes="[1, 5, 10]"
                 size="default"
                 background="false"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
  />

  <!-- 添加，编辑弹框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="article">
      <el-form-item label="分类" :label-width="formLabelWidth">
        <el-input v-model="article.courseTypeName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          {{saveOrUpdateTitle }}
        </el-button>
      </div>
    </template>
  </el-dialog>










</template>

<style scoped>
</style>
